iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 16
1
Modern Web

Fabricjs 筆記系列 第 16

Day 16 - Fabricjs 繪畫功能介紹

  • 分享至 

  • xImage
  •  

今天要來介紹 Fabricjs 的繪畫功能,只要切換一個變數,就能夠輕鬆的將 Fabricjs 原本的物件移動模式,改變成繪畫模式,每一個 Fabricjs 繪畫出來的線條,都會被新增成 Fabric.Path,當我們切回去物件操作模式時,我們一樣能夠像其他物件一樣,自由的操控我們繪畫出來的線條。

並且能夠自訂自己的筆刷樣式,讓繪圖功能變得更加豐富。

繪圖模式

切換至繪圖模式

透過 canvas.isDrawingMode = true 將畫布切換到繪畫模式。
切換後做鼠標拖曳的動作會就會對畫布做出細細的鉛筆筆跡。

若將此屬性設為 false 就為預設的操作物件模式。而我們剛剛所畫出來的線條,就會變回物件的型態,物件為 fabric.Path 的型態。

切換畫筆樣式

設定 canvas.freeDrawingBrush.color 可改變筆刷的顏色。

此屬性可使用 hex rgba 顏色
設定後顏色就會被改變

設定 canvas.freeDrawingBrush.width 改變筆刷大小

設定畫筆寬度,寬度單位為 pixel 不可為小數。

設定 canvas.freeDrawingBrush.shadow 為筆刷加入陰影樣式

可直接使用和 css 相同模式新增陰影。

canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10
canvas.freeDrawingBrush.shadow = '10px 10px rgba(0, 0, 0, 0.5)'

陰影怎麼會這樣??

透過上面的 gif 我們發現我們在畫完圖形放開滑鼠後,陰影才被加上去。
使用 Fabricjs 內建的陰影類別 new fabric.Shadow 陰影才有在繪畫時更新。

// 將陰影改成這樣
canvas.freeDrawingBrush.shadow = new fabric.Shadow({
        blur: 10,
        offsetX: 10,
        offsetY: 10,
        affectStroke: true,
        color: 'black',
      })

或是使用 canvas.freeDrawingBrush.setShadow() 可使用 css 陰影或是傳入陰影參數。

canvas.freeDrawingBrush.setShadow('10px 10px black')

這樣就可以即時的把陰影一起畫上去囉!

改變筆刷樣式

Fabricjs 預設是使用鉛筆的筆刷樣式。
接下來要介紹更多不同 Fabricjs 內建的筆刷樣式。
Fabricjs 提供了下面幾個簡單的基礎樣式可使用。

  • fabric.PencilBrush
  • fabric.CircleBrush
  • fabric.SprayBrush

改變 canvas.freeDrawingBrush 屬性來變更筆刷樣式。

改變筆刷後,一樣可以透過 freeDrawingBrush.colorfreeDrawingBrush.width,來調整筆刷顏色。

須注意因為是使用 new 取得新的物件,所以原本畫筆的顏色和粗細相關設定會被重製,若有需要繼續使用須自己轉存。

圓形筆刷

繪製出大小不一的圓形

canvas.freeDrawingBrush = new fabric.CircleBrush(canvas)
canvas.freeDrawingBrush.color = 'rgba(255,0,0, 0.3)'
canvas.freeDrawingBrush.width = 10

噴霧筆刷

canvas.freeDrawingBrush = new fabric.SprayBrush(canvas)

自訂筆刷

強大的自訂筆刷功能 fabric.PatternBrush 這個類別讓我們能夠自訂筆刷,概念就像蓋印章,必須建立一個 canvas 必且繪製一個圖形,PatternBrush 收到後就會重複繪製你所自訂的圖形,讓我們來看看範例。

const squareBrush = new fabric.PatternBrush(canvas)
// getPatternSrc  取得要重複繪製的圖形 Canvas
squareBrush.getPatternSrc = function() {
  const squareWidth = 30
  const squareDistance = 2
  // 創立一個暫存 canvas 來繪製要畫的圖案
  const patternCanvas = fabric.document.createElement('canvas')
  // canvas 總大小為每一格畫筆的大小
  patternCanvas.width = patternCanvas.height = squareWidth + squareDistance

  const ctx = patternCanvas.getContext('2d')

  ctx.fillStyle = this.color
  ctx.fillRect(0, 0, squareWidth, squareWidth)
  // 回傳繪製完畢的 canvas
  return patternCanvas
}

canvas.freeDrawingBrush = squareBrush

簡單來說我們新增 new fabric.PatternBrush 類別。
並且使用 getPatternSrc 方法回傳繪製完畢的 canvas。
最後在把 canvas.freeDrawingBrush = squareBrush
因為使用自製的 canvas,我們可以很方便自由的創造自己的筆刷樣式,讓筆刷變得更加多元有趣。

今日小結

  • Fabricjs 模式的切換
  • 筆刷樣式調整
    • 顏色、大小、陰影
  • 內建筆刷樣式調整
  • 自訂筆刷樣式調整
  • codepen

上一篇
Day 15 - Fabricjs 物件控制項樣式調整
下一篇
Day 17 - 簡易小畫家實作
系列文
Fabricjs 筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言